<template>
  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;justify-content: space-between;">
          <div class="search-form">
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true" @submit.native.prevent="() => handleQuery()">
              <el-form-item label="" label-width="80px" prop="containerNumber">
                <el-input v-model="list_params.containerNumber" placeholder="搜索货柜号" ></el-input>
              </el-form-item>
              <el-form-item label="" prop="brandName" :style="{width: '120px'}">
                <el-select filterable  v-model="list_params.brandName"  collapse-tags  placeholder="请选择品牌" clearable  :style="{width: '100%'}">
                  <el-option v-for="item in search_brand_list" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="cargoOwnerId" v-if="is_owner != 1" :style="{width: '120px'}">
                <el-select filterable  v-model="list_params.cargoOwnerId" placeholder="请选择货主" clearable  :style="{width: '100%'}" @change="onSearchOwnerChange">
                  <el-option label="全部货主" value=""></el-option>
                  <el-option v-for="item in owner_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="productNames" :style="{width: '140px'}">
                <el-select filterable  v-model="list_params.productNames" placeholder="请选择产品" clearable  :style="{width: '100%'}">
                  <el-option label="全部产品" value=""></el-option>
                  <el-option v-for="item in all_product_list" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="materialFlowType">
                <el-select filterable  v-model="list_params.statusList" multiple placeholder="请选择状态" collapse-tags clearable  :style="{width: '160px'}">
                  <el-option v-for="item in dict.type.supply_list_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="materialFlowType" :style="{width: '120px'}">
                <el-select filterable  v-model="list_params.materialFlowType" placeholder="请选择物流类型" clearable  :style="{width: '120px'}">
                  <el-option label="物流类型" value=""></el-option>
                  <el-option v-for="item in dict.type.material_flow_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="loadingTime">
                <el-date-picker
                  :style="{width: '260px'}"
                  v-model="list_params.loadingTime"
                  type="daterange"  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="装柜开始时间"
                  end-placeholder="装柜结束时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  size="mini" native-type="submit">搜索</el-button>
                <el-button  size="mini" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <div style="display: flex; justify-content: flex-end;">
            <!--            <el-button>删除</el-button>-->
            <!--            <el-button @click="handleEnable(0)" >禁用</el-button>-->
            <!--            <el-button @click="handleEnable(1)" >启用</el-button>-->
            <!-- <el-button @click="handleExport">导出</el-button>
            <el-button>导入</el-button> -->
            <el-button type="primary" @click="addInfo" >新增</el-button>
          </div>
        </div>

      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="table_data" @selection-change="handleSelectionChange" :height="table_height" >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="合同号" prop="contractNumber" width="120"></el-table-column>
            <el-table-column label="货柜号	" prop="containerNumber" width="120"></el-table-column>
            <el-table-column label="货主" prop="cargoOwnerName" width="120"></el-table-column>
            <el-table-column label="供货品牌" prop="brandName" width="120"></el-table-column>
            <el-table-column label="供货产品" prop="productNames" width="120"></el-table-column>
            <el-table-column label="装柜时间" prop="loadingTime" width="120"></el-table-column>
<!--            <el-table-column label="创建时间" prop="createTime"></el-table-column>-->
<!--            <el-table-column label="状态" >-->
<!--              <template slot-scope="scope" >-->
<!--                <div style="color: #111928;" v-if="scope.row.enable==1" >启用</div>-->
<!--                <div style="color: #EB4646;" v-else >禁用</div>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column label="状态" prop="enable" width="70">
              <template slot-scope="scope" >
                {{scope.row.enable==1 ? '正常' : '已撤销'}}
              </template>
            </el-table-column>
            <el-table-column label="订单状态" prop="supplyListStatus">
              <template slot-scope="scope" >
                <dict-tag :options="dict.type.supply_list_status" :value="scope.row.supplyListStatus"/>
              </template>
            </el-table-column>
            <el-table-column label="结算状态" prop="settlementStatus">
              <template slot-scope="scope" >
                <div v-if="scope.row.supplyListStatus < 11">-</div>
                <div v-else>
                  <dict-tag :options="dict.type.order_settlement_status" :value="scope.row.settlementStatus"/>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="物流类型" prop="materialFlowType" width="90">
              <template slot-scope="scope" >
                <dict-tag :options="dict.type.material_flow_type" :value="scope.row.materialFlowType"/>
              </template>
            </el-table-column>
            <el-table-column label="经营类型" prop="manageType" width="80">
              <template slot-scope="scope" >
                <dict-tag :options="dict.type.manage_type" :value="scope.row.manageType"/>
              </template>
            </el-table-column>
            <el-table-column label="目的港" prop="destinationPortName" width="80"></el-table-column>
            <el-table-column label="总数量" prop="totalQty" width="80"></el-table-column>
            <el-table-column label="剩余数量" prop="surplusQty" width="80"></el-table-column>
            <el-table-column label="付汇金额" prop="paymentPrice" width="100"></el-table-column>
            <el-table-column label="操作" fixed="right">

              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  @click="editInfo(scope.row)"-->
<!--                >编辑</el-button>-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  @click="c_delete(scope.row)"-->
<!--                >删除</el-button>-->
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
     <el-drawer
       :title="formData.id?'编辑供货清单':'新增供货清单'"
       size="86%"
      :visible.sync="dialog_show" >
       <el-form :model="formData" ref="form"  size="small" :rules="rules" label-width="120px"  >
         <div class="section">
           <el-row>
             <el-col :span="6">
               <el-form-item label="合同号" prop="contractNumber"  >
                 <el-input v-model="formData.contractNumber" :disabled="formData.id" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="货柜号" prop="containerNumber" >
                 <el-input v-model="formData.containerNumber" :disabled="formData.id" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="货主" prop="cargoOwnerId" >
                 <el-select filterable   style="width: 100%;" v-model="formData.cargoOwnerId" @change="onOwnerChange" >
                   <el-option v-for="owner in owner_list" :key="owner.id" :label="owner.name"
                              :value="owner.id"  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6" style="height: 51px;">
               <el-form-item label="经营类型" prop="manageType" >
                 <el-radio-group v-model="formData.manageType">
                   <el-radio v-for="dict in dict.type.manage_type" :label="dict.value">{{ dict.label }}</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>

             <el-col :span="6">
               <el-form-item label="供货商品" prop="productIds" >
                 <el-select filterable  @focus="chooseProducts"  style="width: 100%;"  v-model="formData.productIds" >
                   <el-option v-for="owner in product_list" :key="owner.id" :value="owner.id" :label="owner.name"></el-option>
                 </el-select><!---->
               </el-form-item>
             </el-col>
           </el-row>
         </div>
         <div class="section">
           <el-row>
             <el-col :span="6">
               <el-form-item label="装柜时间" prop="loadingTime" >
                 <el-date-picker
                   style="width: 100%;"
                   v-model="formData.loadingTime"   value-format="yyyy-MM-dd"
                   type="date"
                   placeholder="请选择装柜时间">
                 </el-date-picker>
               </el-form-item>
             </el-col>

             <el-col :span="6">
               <el-form-item label="预计发运时间" prop="estimatedShipmentTime" >
                 <el-date-picker
                   style="width: 100%;"
                   v-model="formData.estimatedShipmentTime"  value-format="yyyy-MM-dd"
                   type="date"
                   placeholder="请选择预计发运时间">
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="预计到港" prop="estimatedArrivalTime" >
                 <el-date-picker
                   style="width: 100%;"
                   v-model="formData.estimatedArrivalTime"  value-format="yyyy-MM-dd"
                   type="date"
                   placeholder="请选择预计到港时间">
                 </el-date-picker>
               </el-form-item>
             </el-col>
           </el-row>
         </div>
         <div class="section">
           <el-row>
             <el-col :span="6" style="height: 51px;">
               <el-form-item label="物流类型" prop="materialFlowType" >
                 <el-radio-group v-model="formData.materialFlowType">
                   <el-radio v-for="dict in dict.type.material_flow_type" @change="getPortList" :label="dict.value">{{ dict.label }}</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="装货地" prop="cargoLoadAreaId" >
                 <el-select filterable   style="width: 100%;" placeholder="请选择" v-model="formData.cargoLoadAreaId"  >
                   <el-option v-for="owner in shipment_list" :key="owner.id" :label="owner.area" :value="owner.id"  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="目的港" prop="destinationPortId" >
                 <el-select filterable   style="width: 100%;" placeholder="请选择" v-model="formData.destinationPortId"  >
                   <el-option v-for="owner in port_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="供货品牌" prop="brandId" >
                 <el-select filterable   style="width: 100%;" v-model="formData.brandId" placeholder="请选择"  >
                   <el-option v-for="owner in brand_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="封签号" prop="sealNumber"  >
                 <el-input v-model="formData.sealNumber" placeholder="请输入" ></el-input>
               </el-form-item>
             </el-col>
<!--             <el-col :span="6">-->
<!--               <el-form-item label="原始柜号" prop="name"  >-->
<!--                 <el-input v-model="formData.name" placeholder="请输入"  ></el-input>-->
<!--               </el-form-item>-->
<!--             </el-col>-->
           </el-row>
         </div>
         <div v-if="false" class="section">
           <el-row>
             <el-col :span="6">
               <el-form-item label="付汇时间" prop="paymentDate" >
                 <el-date-picker
                   style="width: 100%;"
                   v-model="formData.paymentDate"  value-format="yyyy-MM-dd"
                   type="date"
                   placeholder="请选择付汇时间">
                 </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="付汇金额" prop="paymentPrice"  >
                 <el-input v-model="formData.paymentPrice" type="number" placeholder="请输入" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6" v-if="is_owner!=1">
               <el-form-item label="到账金额" prop="arrivalAmount"  >
                 <el-input v-model="formData.arrivalAmount" type="number" placeholder="请输入" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6" v-if="is_owner!=1">
               <el-form-item label="付汇实际汇率" prop="actualExchangeRate"  >
                 <el-input v-model="formData.actualExchangeRate" type="number" placeholder="请输入" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6" v-if="is_owner!=1">
               <el-form-item label="资方垫款金额" prop="paymentPrice"  >
                 <el-input v-model="formData.capitalAdvancePayment" type="number" placeholder="请输入" ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6" v-if="is_owner!=1">
               <el-form-item label="付汇资方" prop="capitalId" >
                 <el-select filterable   style="width: 100%;" v-model="formData.capitalId" placeholder="请选择"  >
                   <el-option v-for="owner in capital_list" :key="owner.id" :label="owner.name" :value="owner.id"  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6" v-if="is_owner!=1">
               <el-form-item label="付汇手续费(资方)" prop="capitalHandlingFee" >
                 <el-input v-model="formData.capitalHandlingFee" placeholder="请输入" oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"  ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="付汇手续费" prop="customerHandlingFee" >
                 <el-input v-model="formData.customerHandlingFee" placeholder="请输入" oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"  ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6" v-if="is_owner!=1">
               <el-form-item label="预付款" prop="advancePayment" >
                 <el-input v-model="formData.advancePayment" placeholder="请输入" oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+3)}"  ></el-input>
               </el-form-item>
             </el-col>

           </el-row>
         </div>
         <div class="section">
           <el-row>
             <el-col :span="6">
               <el-form-item label="币种" prop="currency" >
                 <el-select filterable   style="width: 100%;" v-model="formData.currency" placeholder="请选择"  >
                   <el-option v-for="dict in dict.type.currency" :key="dict.value" :label="dict.label"
                              :value="dict.value"  ></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="汇率" prop="exchangeRate" >
                 <el-input v-model="formData.exchangeRate" placeholder="请输入" type="number" ></el-input>
               </el-form-item>
             </el-col>
           </el-row>
         </div>
         <div class="section">
           <div style="padding-bottom: 12px;">产品清单</div>
           <div>
             <el-table :data="formData.xnfProductListList"  show-summary  :summary-method="getSummaries" >
               <el-table-column label="序号">
                 <template slot-scope="scope" >
                   {{ scope.$index + 1 }}
                 </template>
               </el-table-column>
               <el-table-column label="产品" :render-header="addRedStar">
                 <template slot-scope="scope" >
                  <el-select filterable  @change="onListProductChange(scope.$index,scope.row)"  style="width: 100%;" v-model="formData.xnfProductListList[scope.$index].productId" placeholder="请选择" >
                    <el-option v-for="owner in product_list" :key="owner.id" :value="owner.id" :label="owner.name"></el-option>
                  </el-select>
                 </template>
               </el-table-column>
               <el-table-column label="品牌" :render-header="addRedStar">
                 <template slot-scope="scope" >
                   <el-select filterable   v-model="formData.xnfProductListList[scope.$index].brandId" style="width: 100%;" placeholder="请选择"  >
                     <el-option v-for="owner in brand_list" :key="owner.id" :value="owner.id" :label="owner.name"></el-option>
                   </el-select>
                 </template>
               </el-table-column>
               <el-table-column label="规格" :render-header="addRedStar">
                 <template slot-scope="scope" >
                   <el-select filterable   style="width: 100%;" placeholder="请选择" v-model="formData.xnfProductListList[scope.$index].specificationId" >
                     <el-option v-for="owner in scope.row.spec_list" :key="owner.id" :value="owner.id" :label="owner.name"></el-option>
                   </el-select>
                 </template>
               </el-table-column>
               <el-table-column label="数量" :render-header="addRedStar" prop="cnt">
                 <template slot-scope="scope" >
                   <el-input v-model="formData.xnfProductListList[scope.$index].cnt" :min="0" placeholder="请输入" type="number" @blur="onCntBlur(scope.$index,scope.row)" @input="onCntChange(scope.$index,scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column label="箱规(KG/件)" :render-header="addRedStar">
                 <template slot-scope="scope" >
                   <el-select filterable   style="width: 100%;" placeholder="请选择" v-model="formData.xnfProductListList[scope.$index].boxSpecificationId" @change="onBoxSpecChange(scope.$index,scope.row)" >
                     <el-option v-for="owner in scope.row.box_spec_list" :key="owner.id" :value="owner.id" :label="owner.weight"></el-option>
                   </el-select>
                 </template>
               </el-table-column>
               <el-table-column label="重量(KG)" prop="weight" :render-header="addRedStar">
               </el-table-column>
               <el-table-column label="单价(人民币)" :render-header="addRedStar">
                 <template slot-scope="scope" >
                   <el-input v-model="formData.xnfProductListList[scope.$index].unitPrice" type="number" placeholder="请输入" @input="getSum(scope.row)" @blur="onPriceBlur(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column label="总价(外币)" prop="totalPriceForeignCurrency">
                 <template slot-scope="scope" >
                   {{formatNum(scope.row.totalPriceForeignCurrency)}}
                 </template>
               </el-table-column>
               <el-table-column label="总价(人民币)" prop="totalPriceRmb">
               </el-table-column>
               <el-table-column label="备注">
                 <template slot-scope="scope" >
                   <el-input v-model="formData.xnfProductListList[scope.$index].remark" placeholder="请输入" ></el-input>
                 </template>
               </el-table-column>
               <el-table-column label="操作">
                 <template slot-scope="scope" >
                   <el-button
                     size="mini"
                     type="text"
                     v-show="scope.$index>0"
                     @click="delProduct(scope.row,scope.$index)"
                   >删除</el-button>
                   <el-button
                     size="mini"
                     type="text"
                     @click="copyProduct(scope.row,scope.$index)"
                   >复制</el-button>
                   <el-button
                     size="mini"
                     type="text"
                     @click="addProduct(scope.row)"
                   >新增</el-button>
                 </template>
               </el-table-column>
             </el-table>
           </div>
         </div>
        <div class="section">
          <el-row>
            <el-col :span="12">
              <div>
                <div style="padding-bottom: 12px;">图片附件</div>
                <div>

                  <el-form-item prop="pictures" label-width="0px" >
                    <el-upload ref="field101" :file-list="pictures" :action="uploadImgUrl" limit="10" multiple
                               :headers="headers" :on-success="field101Success" :on-remove="field101Remove"
                               :before-upload="field101BeforeUpload" list-type="picture-card" accept="image/*">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <div style="padding-bottom: 12px;">文件附件</div>
                <div>

                  <el-form-item prop="pictures" label-width="0px" >
                    <el-upload ref="field102" :file-list="files" :action="uploadImgUrl" limit="10" multiple
                               :headers="headers" :on-success="field102Success" :on-remove="field102Remove"
                               :before-upload="field101BeforeUpload"  >
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>

        </div>
         <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
           <el-button type="primary" @click="submitData">提交</el-button>
         </div>
       </el-form>
    </el-drawer>

    <el-drawer
      title="供货单详情"
      size="86%"
      :visible.sync="info_show" >
      <div class="section">
        <el-row>
          <el-col :span="4">
            <div>
              <div class="section-item-title">合同号</div>
              <div>{{ info.contractNumber }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">货柜号</div>
              <div>{{ info.containerNumber }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">状态</div>
              <div><dict-tag :options="dict.type.supply_list_status" :value="info.supplyListStatus"/></div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">货主</div>
              <div>{{ info.cargoOwnerName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">供货产品</div>
              <div>{{ info.productNames }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">经营类型</div>
              <div><dict-tag :options="dict.type.manage_type" :value="info.manageType"/></div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="section">
        <el-row>
          <el-col :span="4">
            <div>
              <div class="section-item-title">装柜时间</div>
              <div>{{ info.loadingTime }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">预计发运时间</div>
              <div>{{ info.estimatedShipmentTime }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">预计到港</div>
              <div>{{ info.estimatedArrivalTime }}</div>
            </div>
          </el-col>

        </el-row>
      </div>
      <div class="section">
        <el-row>
          <el-col :span="4">
            <div>
              <div class="section-item-title">物流类型</div>
              <div><dict-tag :options="dict.type.material_flow_type" :value="info.materialFlowType"/></div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">装货地</div>
              <div>{{ info.cargoLoadAreaName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">目的港</div>
              <div>{{ info.destinationPortName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">供货品牌</div>
              <div>{{ info.brandName }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">封签号</div>
              <div>{{ info.sealNumber?info.sealNumber:'-' }}</div>
            </div>
          </el-col>

        </el-row>
      </div>
      <div class="section" v-if="false">
        <el-row>
          <el-col :span="4">
            <div>
              <div class="section-item-title">付汇时间</div>
              <div>{{ info.paymentDate }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">付汇金额</div>
              <div>{{ info.paymentPrice }}</div>
            </div>
          </el-col>
          <el-col :span="4" v-if="is_owner!=1">
            <div>
              <div class="section-item-title">到账金额</div>
              <div>{{ info.arrivalAmount }}</div>
            </div>
          </el-col>
          <el-col :span="4" v-if="is_owner!=1">
            <div>
              <div class="section-item-title">付汇实际汇率</div>
              <div>{{ info.actualExchangeRate }}</div>
            </div>
          </el-col>
          <el-col :span="4" v-if="is_owner!=1">
            <div>
              <div class="section-item-title">资方垫款金额</div>
              <div>{{ info.capitalAdvancePayment }}</div>
            </div>
          </el-col>
          <el-col :span="4" v-if="is_owner!=1">
            <div>
              <div class="section-item-title">付汇资方</div>
              <div>{{ info.capitalName }}</div>
            </div>
          </el-col>
          <el-col :span="4" v-if="is_owner!=1">
            <div>
              <div class="section-item-title">付汇手续费(资方)</div>
              <div>{{ info.capitalHandlingFee }}</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">付汇手续费</div>
              <div>{{ info.customerHandlingFee }}</div>
            </div>
          </el-col>
          <el-col :span="4"  v-if="is_owner!=1">
            <div>
              <div class="section-item-title">预付款</div>
              <div>{{info.advancePayment}}</div>
            </div>
          </el-col>

        </el-row>
    </div>
      <div class="section">
        <el-row>
          <el-col :span="4">
            <div>
              <div class="section-item-title">币种</div>
              <div><dict-tag :options="dict.type.currency" :value="info.currency"/></div>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              <div class="section-item-title">汇率</div>
              <div>{{ info.exchangeRate }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="section">

        <div style="padding-bottom: 12px;">产品清单</div>
        <div>
          <el-table :data="xnfProductListList" show-summary :summary-method="getSummaries">
            <el-table-column label="序号">
              <template slot-scope="scope" >
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="产品" prop="productName"></el-table-column>
            <el-table-column label="品牌" prop="brandName"></el-table-column>
            <el-table-column label="规格" prop="specificationName"></el-table-column>
            <el-table-column label="数量" prop="cnt"></el-table-column>
            <el-table-column label="箱规(KG/件)" prop="boxSpecificationWeight"></el-table-column>
            <el-table-column label="重量(KG)" prop="weight"></el-table-column>
            <el-table-column label="单价(人民币)" prop="unitPrice"></el-table-column>
            <el-table-column label="总价(外币)" prop="totalPriceForeignCurrency">
              <template slot-scope="scope" >
                {{formatNum(scope.row.totalPriceForeignCurrency)}}
              </template>
            </el-table-column>
            <el-table-column label="总价(人民币)" prop="totalPriceRmb"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="section">
        <el-row>
          <el-col :span="12">
            <div>图片附件</div>
            <div>
              <el-row :gutter="10">
                <el-col v-for="item in imgs" :span="4" >
                  <el-image
                            style="width: 100%; height: 100px;"
                            :src="item.url"
                            :preview-src-list="imgs.map(img => img.url)"
                  >        </el-image>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <div style="padding-bottom: 12px;">文件附件</div>
              <div>
                <div v-for="item in docs" style="background: #F3F4F6;padding: 16px;border-radius: 16px;margin: 10px 0px;display: flex;">
                  <div style="flex: 1;">
                    {{item.name}}
                  </div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)" ><i class="el-icon-view"></i></div>
                  <div style="margin: 0px 10px;cursor: pointer;" @click="openNav(item.url)"  ><i class="el-icon-download"></i></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="section">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="国际物流" name="first">
            <el-table :data="sea_list" v-if="sea_list.length>0">
              <el-table-column label="物流类型" prop="productName">
                <template slot-scope="scope" >
                  国际海运
                </template>
              </el-table-column>
              <el-table-column label="船名/车牌号" prop="shipName"></el-table-column>
              <el-table-column label="预计出发" prop="estimatedDepartTime"></el-table-column>
              <el-table-column label="预计到港" prop="estimatedArrivalTime"></el-table-column>
              <el-table-column label="实际出发" prop="actualDepartTime"></el-table-column>
              <el-table-column label="实际到港" prop="actualArrivalTime"></el-table-column>
              <el-table-column label="目的港" prop="aimPortName"></el-table-column>
              <el-table-column label="国外代理" prop="agentName"></el-table-column>
              <el-table-column label="创建时间" prop="createTime"></el-table-column>
<!--              <el-table-column label="操作" prop="productName"></el-table-column>-->
            </el-table>
            <el-table :data="land_list" v-if="land_list.length>0">
              <el-table-column label="物流类型" prop="productName">
                <template slot-scope="scope" >
                  国际陆运
                </template>
              </el-table-column>
              <el-table-column label="船名/车牌号" prop="licensePlateNumber"></el-table-column>
              <el-table-column label="预计出发" prop="estimatedDepartTime"></el-table-column>
              <el-table-column label="预计到港" prop="estimatedArrivalTime"></el-table-column>
              <el-table-column label="实际出发" prop="actualDepartTime"></el-table-column>
              <el-table-column label="实际到港" prop="actualArrivalTime"></el-table-column>
              <el-table-column label="目的港" prop="aimPortName"></el-table-column>
              <el-table-column label="国外代理" prop="agentName"></el-table-column>
              <el-table-column label="创建时间" prop="createTime"></el-table-column>
<!--              <el-table-column label="操作" prop="productName"></el-table-column>-->
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="国内清关" name="second">
            <el-table :data="clear_list">
              <el-table-column label="目的港" prop="portName"></el-table-column>
              <el-table-column label="国内清关公司" prop="customsClearanceCompanyName"></el-table-column>
              <el-table-column label="海关放行时间" prop="customsReleaseTime"></el-table-column>
              <el-table-column label="税金" prop="actualImportTax"></el-table-column>
              <el-table-column label="清关费" prop="actualCustomsClearanceFee"></el-table-column>
              <el-table-column label="国内陆运费" prop="actualTransportFee"></el-table-column>
              <el-table-column label="港口提货时间" prop="portDeliveryTime"></el-table-column>
<!--              <el-table-column label="操作" prop="productName"></el-table-column>-->
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="转运记录(国内物流)" name="third">
            <el-table :data="domestic_list">
              <el-table-column label="序号" prop="index">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="转柜日期" prop="createTime"></el-table-column>
              <el-table-column label="销售档口" prop="stallName"></el-table-column>
              <el-table-column label="配送市场" prop="marketName"></el-table-column>
              <el-table-column label="国内运输公司" prop="domesticMaterialFlowCompanyName"></el-table-column>
              <el-table-column label="发车时间" prop="departTime"></el-table-column>
              <el-table-column label="市场到达时间" prop="arrivalTime"></el-table-column>
<!--              <el-table-column label="数量" prop="productName"></el-table-column>-->
              <el-table-column label="车牌号" prop="licensePlateNumber"></el-table-column>
              <el-table-column label="国内运费报价" prop="feeQuotation"></el-table-column>
              <el-table-column label="国内运费成本" prop="feeCost"></el-table-column>
<!--              <el-table-column label="国内运费成本" prop="productName"></el-table-column>-->
              <el-table-column label="国内运费支付方" prop="feePayee"></el-table-column>
<!--              <el-table-column label="操作" prop="productName"></el-table-column>-->
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="销售清单" name="fourth">
            <el-table :data="sell_list">
              <el-table-column label="序号" prop="index">
                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="产品" prop="saleProductName"></el-table-column>
              <el-table-column label="销售档口" prop="stallName"></el-table-column>
<!--              <el-table-column label="到货数量" prop="paid"></el-table-column>-->
              <!--              <el-table-column label="库存数量" prop="paid"></el-table-column>-->
              <el-table-column label="销售数量" prop="saleCnt"></el-table-column>
              <el-table-column label="销售总金额(元)" prop="amt"></el-table-column>
              <el-table-column label="状态" prop="salesStatus">
                <template slot-scope="scope" >
                  {{scope.row.salesStatus==1?'已销售':'未销售'}}
                </template>
              </el-table-column>
              <el-table-column label="销售日期" prop="saleDate"></el-table-column>
<!--              <el-table-column label="操作" prop="productName"></el-table-column>-->
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="结算清单" name="five">
            <el-table :data="settlement_list">
              <el-table-column label="序号" prop="index">

                <template slot-scope="scope" >
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="结算日期" prop="settlementDate"></el-table-column>
              <el-table-column label="结算单号" prop="settlementNumber"></el-table-column>
<!--              <el-table-column label="代卖档口" prop="productName"></el-table-column>-->
              <el-table-column label="销售金额" prop="saleAmt"></el-table-column>
              <el-table-column label="商品结算金额" prop="goodsSettlementAmt"></el-table-column>
              <el-table-column label="垫付费用" prop="prepaymentFee"></el-table-column>
              <el-table-column label="调整金额" prop="adjustmentAmt"></el-table-column>
              <el-table-column label="结算金额" prop="settlementAmt"></el-table-column>
              <el-table-column label="结算状态" prop="settlementStatus">
                <template slot-scope="scope" >
                  <dict-tag :options="dict.type.order_settlement_status" :value="scope.row.settlementStatus"/>
                  </template>
              </el-table-column>
<!--              <el-table-column label="操作" prop="productName"></el-table-column>-->
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="变更记录" name="six">
            <el-timeline >
              <el-timeline-item color="#14BC8F"
                v-for="(activity, index) in change_list"
                :key="index"
                :timestamp="activity.createTime">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="section" style="display: flex;justify-content: flex-end;position: sticky;bottom: 0px;">
        <el-button type="" v-if="info.supplyListStatus == 1" @click="revoke" >撤销</el-button>
        <el-button type="" @click="copy" >复制</el-button>
        <el-button type="primary" @click="editInfo(info.id)" >编辑</el-button>
      </div>
    </el-drawer>
    <el-dialog
      :visible.sync="product_dialog_show" destroy-on-close >
      <el-table :data="product_list" @selection-change="handleSelectionProductChange" >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="产品" prop="name">
        </el-table-column>
        <el-table-column label="单位" prop="unitId">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.unit" :value="scope.row.unitId"/>
          </template>
        </el-table-column>
        <el-table-column label="品牌" prop="brandName">
        </el-table-column>
        <el-table-column label="货主" prop="cargoOwnerName">
        </el-table-column>
      </el-table>
      <div slot="title" style="background: #F3F4F6;margin: -20px;padding: 20px;height: 58px;border-radius: 10px;">选择供货商品</div>
      <div slot="footer" >
        <el-button @click="cancelProducts" >取消</el-button>
        <el-button type="primary"  @click="confirmProducts">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {list,del,add,update,detail,handleEnable,getProductList as getOrderProductList} from '@/api/supply/order'
import { getToken } from "@/utils/auth";
import {list as ownerList} from "@/api/base/owner";
import {list as productList,AllList} from "@/api/product/info";
import {list as specList} from "@/api/product/spec";
import {list as boxSpecList,detail as boxSpecDetail} from "@/api/product/box_spec";
import {list as brandList,allList as brandAllList} from "@/api/product/brand";
import {list as shipmentList} from "@/api/base/shipment";
import {list as portList} from "@/api/base/port";
import {list as seaList} from "@/api/logistics/sea";
import {list as landList} from "@/api/logistics/land";
import { list as domesticList } from "@/api/logistics/domestic"
import { list as sellList } from "@/api/sell/sale_list"
import { list as changeList} from "@/api/supply/change_record"
import {list as clearList} from "@/api/clearance/order"
import {list as settlementList} from "@/api/sell/settlement"
import {list as capitalList} from "@/api/base/capital"
import { getUploadFiles,getUploadFileUrls } from '@/api/common'
import {mapGetters} from "vuex";
export default {
  name: 'info',
  computed: {
    ...mapGetters([
      'roles'
    ]),
  },
  dicts:['unit','currency','supply_list_status','manage_type','material_flow_type','order_settlement_status'],
  data() {
    return {
      table_height:window.innerHeight - 300,
      sea_list:[],
      land_list:[],
      domestic_list:[],
      sell_list:[],
      change_list:[],
      activeName:'first',
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/file/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      pictures:[],
      files:[],
      list_params: {
        pageNum: 1,
        pageSize: 10,
        brandIds:[],
        brandName:'',
        productNames:'',
        materialFlowType:'',
        cargoOwnerId:'',
        loadingTime:'',
        name: '',statusList:[]
      },
      list_total: 0,
      table_data: [],
      product_data: ['1', '2'],
      formData: {
        xnfProductListList:[{
          productId: '',
        }],
        manageType: '1',
        exchangeRate:'1',
        materialFlowType:'1',
      },
      rules: {
        contractNumber:[{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        containerNumber:[{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        cargoOwnerId:[{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        cargoLoadAreaId:[{
          required: true,
          message: '请输入',
          trigger: 'change'
        }],
        loadingTime:[{  // 必须是这个时间格式
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        productIds:[{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }],
        estimatedShipmentTime:[{  // 必须是这个时间格式
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        manageType:[{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }],
        materialFlowType: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
      },
      dialog_show: false,
      info_show:false,
      info:{},
      imgs:[],
      docs:[],
      product_dialog_show:false,
      owner_list:[],
      ids:[],
      manageType:1,
      product_list:[],
      all_product_list:[],
      product_ids:[],
      brand_list:[],  // 品牌
      search_brand_list:[],
      shipment_list:[],
      port_list:[],
      spec_list:[],
      xnfProductListList:[
      ],
      clear_list:[],
      settlement_list:[],
      capital_list:[],
      is_owner:0,
    }
  },
  created() {
    this.getList()
    this.getAllProductList()
    this.getbrandList()
    this.getSearchBrandList()
    this.is_owner = (this.roles.indexOf('cargo_owner') != -1)?1:0;
    if(this.is_owner != 1){
      this.getOwnerList()
    }
    console.log(this.roles)
  },
  methods: {
    getCapitalList(){
      capitalList({is_page:0}).then(res => {
        this.capital_list = res.rows;
      })
    },
    getSettlementList(id){
      settlementList({supplyListId:id,is_page:0}).then(res => {
        this.settlement_list = res.rows;
      })
    },
    getClearList(id){
      clearList({supplyListId:id,is_page:0}).then(res => {
        this.clear_list = res.rows;
      })
    },
    getSeaList(id){
      seaList({supplyListId:id,is_page:0}).then(res => {
        this.sea_list = res.rows;
      })
      landList({supplyListId:id,is_page:0}).then(res => {
        this.land_list = res.rows;
      })
    },
    getDomesticList(id){
      domesticList({supplyListId:id,is_page:0}).then(res => {
        this.domestic_list = res.rows;
      })
    },
    getSellList(id){
      sellList({supplyListId:id,is_page:0}).then(res => {
        this.sell_list = res.rows;
      })
    },
    getChangeList(id){
      changeList({supplyListId:id,is_page:0}).then(res => {
        this.change_list = res.rows;
      })
    },
    getPortList(){
      let params = {
        is_page:0
      }
      if (this.formData.materialFlowType == '1'){
        params['category'] = '1'
      }else if (this.formData.materialFlowType == '2'){
        params['category'] = '2'
      }
      this.formData = {
        ...this.formData,
        destinationPortId:'',
        is_page:0
      }
      portList(params).then(res => {
        this.port_list = res.rows;
      })
    },
    getProductList(){
      productList({cargoOwnerId:this.formData.cargoOwnerId,is_page:0}).then(res => {
        this.product_list = res.rows;
      })
    },
    getAllProductList(){
      AllList().then(res => {
        this.all_product_list = res.rows;
      })
    },
    getbrandList(){
      brandList({cargoOwnerId:this.formData.cargoOwnerId,is_page:0}).then(res => {
        this.brand_list = res.rows;
      })
    },
    getSearchBrandList(){
      brandAllList({cargoOwnerId:this.list_params.cargoOwnerId,is_page:0}).then(res => {
        this.search_brand_list = res;
      })
    },
    getOwnerList(){
      ownerList({is_page:0}).then(res => {
        this.owner_list = res.rows;
      })
    },
    getList() {
      let params = {
        ...this.list_params
      }
      if (params.loadingTime&&params.loadingTime.length > 0){
        params.startLoadingTime = params.loadingTime[0]
        params.endLoadingTime = params.loadingTime[1]
        params.loadingTime = undefined;
      }

      list(params).then(res => {
        this.table_data = res.rows
        this.list_total = res.total
      })
    },
    handleQuery() {
      this.list_params.pageNum = 1
      if (this.list_params.statusList&&this.list_params.statusList.length != 0){
        this.list_params = {
          ...this.list_params,
          supplyListStatusList: this.list_params.statusList.join(',')
        }
      }
      this.getList()
    },
    resetQuery() {
      this.list_params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
    },
    handleEnable(enable) {
      if (this.ids.length == 0){
        this.$message({
          message: '请选择要操作的数据',
          type: 'warning'
        });
        return;
      }
      handleEnable(this.ids,enable).then(res => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    addInfo() {

      this.getOwnerList()
      this.getPortList()
      this.getCapitalList()
      this.formData = {
        xnfProductListList:[{productId:''}],
        manageType:'1',
        materialFlowType:'1',
        loadingTime:'',
        paymentDate:'',
        estimatedShipmentTime:'',
        estimatedArrivalTime:'',
        clearCabinetDate:'',
        exchangeRate:1,
        currency:'4'
      }
      this.brand_list = []
      this.product_list = []

      this.imgs = []
      this.docs = []
      this.pictures = []
      this.files = []

      this.dialog_show = true
      this.$refs.form.resetFields();

    },
    editInfo(id){

      this.getOwnerList()
      this.getPortList()
      this.getCapitalList()
      detail(id).then(res => {
        // let ids = res.data.productIds.split(',').map(item => parseInt(item));
        let imgs = res.data.imgFiles;
        let docs = res.data.docFiles;
        if (imgs != ''){
          getUploadFiles(imgs).then((img_res)=>{
            this.imgs = getUploadFileUrls(img_res.data);
            this.pictures = this.imgs;
          })
        }
        if (docs != ''){
          getUploadFiles(docs).then((img_res)=>{
            this.docs = getUploadFileUrls(img_res.data);
            this.files = this.docs;
          })
        }

        this.formData = {
          ...res.data,
          // productIds:ids,
          productIds:parseInt(res.data.productIds),
          manageType:res.data.manageType+'',
          materialFlowType:res.data.materialFlowType+'',
          currency:res.data.currency+'',
          loadingTime:res.data.loadingTime?new Date(res.data.loadingTime):'',
          paymentDate:res.data.paymentDate?new Date(res.data.paymentDate):'',
          estimatedShipmentTime:res.data.estimatedShipmentTime?new Date(res.data.estimatedShipmentTime):'',
          estimatedArrivalTime:res.data.estimatedArrivalTime?new Date(res.data.estimatedArrivalTime):'',
          clearCabinetDate:res.data.clearCabinetDate?new Date(res.data.clearCabinetDate):'',
        }
        this.getProductList()
        this.getSupplyOrderProducts(id);
        this.getbrandList()
        this.getShipmentList()
        this.dialog_show = true
        this.info_show = false;
      })
    },

    c_delete(row){
      let id = row.id;
      del(id).then(res=>{
        this.getList()
      })
    },
    handleConfirm(){
      if (this.formData.id){
        update(this.formData).then((res)=>{
          this.$message.success('编辑成功')
          this.getList()
        })
      }else {
        add(this.formData).then((res)=>{
          this.$message.success('添加成功')
          this.getList()
        })
      }
      this.close()
    },
    close() {
      this.dialog_show = false
    },
    // 给表头加必填符号*
    addRedStar(h, { column }) {
      return [
        h("span", "" + column.label),
        h("span", { style: "color: red" }, " *"),
      ];
    },
    field101BeforeUpload(file) {
      const postfix= file.name.substring(file.name.lastIndexOf('.')+1)
      if(!this.fileSuffix.includes(postfix)){
        this.$message.error('文件类型仅支持'+this.fileSuffix);
        return false
      }
    },
    field101Success(e){
      let imgFiles = this.formData.imgFiles?this.formData.imgFiles:'';
      let imgs = imgFiles == ''?[]:imgFiles.split(',');
      imgs.push(e.data.id)
      this.formData = {
        ...this.formData,
        imgFiles:imgs.join(',')
      }
    },
    field101Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        imgFiles:ids.join(','),
      }
    },
    field102BeforeUpload(file) {
    },
    field102Success(e){
      let docFiles = this.formData.docFiles?this.formData.docFiles:'';
      let docs = docFiles == ''?[]:docFiles.split(',');
      docs.push(e.data.id)
      this.formData = {
        ...this.formData,
        docFiles:docs.join(',')
      }
    },
    field102Remove(file, fileList){
      let ids = []
      fileList.forEach((item)=>{
        if (item.id){
          ids.push(item.id);
        }else{
          ids.push(item.response.data.id)
        }
      })
      this.formData = {
        ...this.formData,
        docFiles:ids.join(','),
      }
    },
    onOwnerChange(e){
      if (e == ''){
        this.product_list = []
        return;
      }
      this.formData = {
        ...this.formData,
        productIds:'',
        cargoLoadAreaId:'',
        brandId:'',
        xnfProductListList:[{}]
      }
      this.getProductList()
      this.getbrandList()
      this.getShipmentList()
      this.getSpecList()
    },
    getSpecs(row){
      specList({productId:row.productId,is_page:0}).then(res => {
        // this.spec_list = res.rows;
        this.$set(row,'spec_list',res.rows)
      })

    },
    getBoxSepcs(row){
      boxSpecList({productId:row.productId,is_page:0}).then(res=>{
        this.$set(row,'box_spec_list',res.rows)
      })
    },
    getSpecList(){
      specList({cargoOwnerId:this.formData.cargoOwnerId,is_page:0}).then(res => {
        this.spec_list = res.rows;
      })
    },
    getBoxSpecList(index){
      let productId = this.formData.xnfProductListList[index].productId;
      boxSpecList({productId:productId,is_page:0}).then(res => {
        if (res.rows.length > 0){
          let xnfProductListList = this.formData.xnfProductListList;
          xnfProductListList[index].boxSpecificationId = res.rows[0].id;
          xnfProductListList[index].boxSpecificationWeight = res.rows[0].weight;
          // xnfProductListList[index].weight = res.rows[0].weight;
          this.formData = {
            ...this.formData,
            xnfProductListList: xnfProductListList,
          }
        }else{
          let xnfProductListList = this.formData.xnfProductListList;
          xnfProductListList[index].boxSpecificationId = undefined;
          xnfProductListList[index].boxSpecificationWeight = undefined;
          xnfProductListList[index].weight = undefined;
          this.formData = {
            ...this.formData,
            xnfProductListList: xnfProductListList,
          }
        }
      })
    },
    onCntChange(index,row){
      let cnt = !isNaN(row.cnt)?row.cnt:0;
      let boxSpecificationWeight = row.boxSpecificationWeight?row.boxSpecificationWeight:0;
      this.$set(row,'weight',parseFloat(cnt) * parseFloat(boxSpecificationWeight));
      this.onBoxSpecChange(index,row)
      this.getSum(row)
      this.getWeightSum(row)
    },
    onCntBlur(index,row){
      if (isNaN(row.cnt)||row.cnt < 0){
        this.$set(row,'cnt',0)
      }else if (row.cnt == ''){
        this.$set(row,'cnt',0)
      }else{
        this.$set(row,'cnt',parseFloat(row.cnt).toFixed(2))
      }
      this.onCntChange(index,row)
    },
    onBoxSpecChange(index,row){
      if (row.boxSpecificationId == undefined||row.boxSpecificationId == '') {
        return
      }
      boxSpecDetail(this.formData.xnfProductListList[index].boxSpecificationId).then(res=>{
        this.$set(row,'boxSpecificationWeight',res.data.weight);
        this.$set(row,'weight',row.cnt * res.data.weight);
      })
    },
    getShipmentList(){
      shipmentList({cargoOwnerId:this.formData.cargoOwnerId,is_page:0}).then(res => {
        this.shipment_list = res.rows;
      })
    },
    submitData(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // this.handleConfirm()
          let xnfProductListList = this.formData.xnfProductListList;
          this.formData = {
            ...this.formData,
            xnfProductListList: xnfProductListList,
            // productIds: this.product_ids.join(',')
          }
          for (let key in this.formData) {
            if (this.formData[key] == '-') {
              this.formData[key] = undefined;
            }
          }
          if (this.formData.id){
            update(this.formData).then(res => {
              this.$message.success('编辑成功')
              this.dialog_show = false
              this.getList()
            })
          }else{
            add(this.formData).then(res => {
              this.$message.success('添加成功')
              this.dialog_show = false
              this.getList()
            }).finally(res => {
              this.$message.error(res.msg)
            }
 )

          }
        } else {
          return false;
        }
      });
    },
    chooseProducts(){
      if (!this.formData.cargoOwnerId){
       this.$message({
          message: '请先选择货主',
          type: 'warning'
        });
        return;
      }
      // this.product_dialog_show = true;
    },
    confirmProducts(){
      this.product_dialog_show = false;
      this.formData = {
        ...this.formData,
        productIds: this.product_ids,
      }
    },
    cancelProducts(){
      this.product_dialog_show = false;
    },
    handleSelectionProductChange(selection){
      this.product_ids = selection.map(item => item.id);

    },
    addProduct(){
      let arr = this.formData.xnfProductListList;
      arr.push({productId: ''});
      this.formData = {
        ...this.formData,
        xnfProductListList: arr,
      }
    },
    delProduct(row,index){
      let arr = this.formData.xnfProductListList;
      arr.splice(index,1);
      this.formData = {
        ...this.formData,
        xnfProductListList: arr,
      }
    },
    copyProduct(row,index){
      let arr = this.formData.xnfProductListList;
      let cp = JSON.parse(JSON.stringify(arr[index]))
      cp.id = undefined;
      arr.push(cp);
      this.formData = {
        ...this.formData,
        xnfProductListList: arr,
      }
    },
    onListProductChange(index,row){
      // this.getBoxSpecList(index);
      let data = this.getSpecs(row);
      this.$set(row,'brandId','');
      this.$set(row,'specificationId','');
      this.$set(row,'boxSpecificationId','');
      this.$set(row,'cnt','');
      this.$set(row,'unitPrice','');
      this.getBoxSepcs(row)
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]));
        if (index === 0) {
          sums[index] = '合计';
          return;
        } else if (index === 4){
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else if (index === 6){

          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else if (index === 8){

          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2)
          sums[index] = this.formatNum(sums[index])
        } else if (index === 9){

          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2)
          sums[index] = this.formatNum(sums[index])
        }
      });
      return sums;
    },
    showInfo(info){
      this.info_show = true
      this.change_list = []
      this.domestic_list = []
      this.sea_list = []
      this.settlement_list = []
      this.sell_list = []
      this.clear_list = []
      this.files = [];
      this.pictures = [];
      this.getSeaList(info.id)
      this.getDomesticList(info.id)
      this.getSellList(info.id)
      this.getChangeList(info.id)
      this.getClearList(info.id)
      this.getSettlementList(info.id)

      detail(info.id).then(res=>{
        let info = res.data;
        info.currency = info.currency + ''
        console.log( typeof  info.currency)
        this.info = info;
        let imgs = res.data.imgFiles;
        let docs = res.data.docFiles;
        if (imgs != ''){
          getUploadFiles(imgs).then((img_res)=>{
            this.imgs = getUploadFileUrls(img_res.data);
          })
        }
        if (docs != ''){
          getUploadFiles(docs).then((img_res)=>{
            this.docs = getUploadFileUrls(img_res.data);
          })
        }
      })
      // getChangeRecord(info.id).then(res=>{
      //   this.change_record = res.rows
      // })
      this.getSupplyOrderProducts(info.id);
    },
    getSupplyOrderProducts(id){
      getOrderProductList(id).then((res)=>{
        let row = res.rows;
        if (row.length == 0){
          row = [{}]
        }else{
          for (let i = 0;i<row.length;i++){
            this.getBoxSepcs(row[i]);
            this.getSpecs(row[i]);
          }
        }
        this.xnfProductListList = row
        this.formData = {
          ...this.formData,
          xnfProductListList: row,
        }
      })
    },
    getSupplyOrderProductsByCopy(id){
      getOrderProductList(id).then((res)=>{
        let row = res.rows;
        for(let i = 0;i<row.length;i++){
          row[i].id = undefined;
        }
        this.xnfProductListList = row;
        this.formData = {
          ...this.formData,
          xnfProductListList: row,
        }
      })
    },
    copy(){

      // let ids = this.info.productIds.split(',').map(item => parseInt(item));
      let id = this.info.id;
      // this.product_ids = ids;
      this.formData = {
        ...this.info,
        // productIds:ids,
        id:undefined,
        contractNumber:'',
        containerNumber:'',
        productIds:parseInt(this.info.productIds),
        manageType:this.info.manageType+'',
        materialFlowType:this.info.materialFlowType+'',
        loadingTime:this.info.loadingTime?new Date(this.info.loadingTime):'',
        paymentDate:this.info.paymentDate?new Date(this.info.paymentDate):'',
        estimatedShipmentTime:this.info.estimatedShipmentTime?new Date(this.info.estimatedShipmentTime):'',
        estimatedArrivalTime:this.info.estimatedArrivalTime?new Date(this.info.estimatedArrivalTime):'',
        clearCabinetDate:this.info.clearCabinetDate?new Date(this.info.clearCabinetDate):'',
      }
      this.getOwnerList()
      this.getPortList()
      this.getCapitalList()
      this.getProductList()
      this.getShipmentList()
      this.getSupplyOrderProductsByCopy(id);
      this.dialog_show = true
      this.info_show = false;
    },
    revoke(){
      this.$confirm('确定撤销该订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        handleEnable([this.info.id],0).then(res=>{
          this.$message({
            type: 'success',
            message: '撤销成功!'
          });
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消撤销'
        });
      });
    },
    getSum(row){
      let weight = row.weight?row.weight:0;
      let unitPrice = row.unitPrice?row.unitPrice:0;
      let exchangeRate = this.formData.exchangeRate?this.formData.exchangeRate:0;
      if(exchangeRate!=0){
        this.$set(row,'totalPriceForeignCurrency',weight*unitPrice*exchangeRate)
      }else{
        this.$set(row,'totalPriceForeignCurrency','-')
      }
      this.$set(row,'totalPriceRmb',(weight*unitPrice).toFixed(2))

      // (formData.xnfProductListList[scope.$index].cnt&&formData.xnfProductListList[scope.$index].unitPrice)&&formData.exchangeRate?formData.xnfProductListList[scope.$index].cnt*formData.xnfProductListList[scope.$index].unitPrice*formData.exchangeRate:'-'
    },
    onPriceBlur(row){
      if (isNaN(row.unitPrice)||row.unitPrice < 0){
        this.$set(row,'unitPrice',0)
      }else if (row.cnt == ''){
        this.$set(row,'unitPrice',0)
      }else{
        this.$set(row,'unitPrice',parseFloat(row.unitPrice).toFixed(2))
      }
      this.getSum(row)
    },
    getWeightSum(row) {
      let boxSpecificationWeight = row.boxSpecificationWeight?row.boxSpecificationWeight:0;
      let cnt = row.cnt?row.cnt:0;
      this.$set(row,'weight',cnt*boxSpecificationWeight)
    },
    formatNum(num){
      if (isNaN(num)){
        return '-';
      }
      console.log(typeof num)
      num = parseFloat(num).toFixed(2);
      return new Intl.NumberFormat('zh-CN', {
        style: 'decimal'}).format(num);
    },
    openNav(url){
      window.open(url)
    },
    onSearchOwnerChange(){
      this.list_params = {
        ...this.list_params,
        brandIds: []
      }
      this.getSearchBrandList()
    }
  }
}
</script>

<style scoped>
.section{
  background: #fff;
  padding: 24px;
  margin: 20px;
  border-radius: 8px;
}
.section-item-title{
  padding-bottom: 10px;
}
</style>
<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}

</style>
